<template>
  <div class="focus">
      <myheader title='我的关注'>
          <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
      </myheader>
      <div class="list">
          <div class="box" v-for="(v,i) in followList" :key="i">
              <img :src="v.head_img" alt="">
              <div class="center">
                  <p>{{v.nickname}}</p>
                  <span>{{v.create_date | dateFormat}}</span>
              </div>
              <span @click="unfollow(v.id)">取消关注</span>
          </div>
      </div>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import {user_followList,user_unfollowList} from '@/apis/user.js'
import axios from '@/utils/myaxios.js'
import {dateFormat} from '@/utils/myfilter.js'
export default {
  data () {
    return {
      followList:[]  
    }
  },
  components: {
    myheader
  },
  filters: {
    dateFormat
  },
  methods: {
    // 取消关注
    // id是当前用户的id
    // index是当前数据的索引
    async unfollow(id,index){
      let res = await user_unfollowList(id)
      console.log(res,index);
      if (res.data.message == '取消关注成功'){
        this.$toast.success(res.data.message)
        this.followList.splice(index,1)
      }
    }
  },
  async mounted () {
    let res = await user_followList()
    console.log(res);
    this.followList = res.data.data.map(v=>{
      v.head_img = axios.defaults.baseURL + '/uploads/image/default.jpeg'
      return v
    })
  }
}
</script>

<style lang='less' scoped>
.list{
    .box{
        display: flex;
        padding: 25px 10px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        > img{
            display: block;
            width: 50/360*100vw;
            height: 50/360*100vw;
            border-radius: 50%;
            padding: 0 10px;
        }
        > .center{
            flex: 1;
            > p {
                line-height: 30px;
                font-size: 14px;
            }
            > span {
                font-size: 12px;
                color:#999;
            }
        }
        > span {
            height: 30px;
            background-color: #eee;
            font-size: 13px;
            border-radius: 30px;
            line-height: 30px;
            padding: 0px 15px;
        }
    }
}
</style>
